﻿<template>
  <div class = 'myHeader'>
    <!-- 收起和展开submenu的按钮图标 -->
    <!-- 默认皮肤是展示 -->
    <div class = 'header_leftSubmenuBtn' @click = 'changeCollapse' :title = "isCollapse ? '展开' : '收起'" v-if = "$store.state.currentTheme.indexOf('theme_default') !== -1">
      <i class = 'iconfont icon-icon-GIS_zhankai' v-show = 'isCollapse'></i>
      <i class = 'iconfont icon-icon-GIS_shouqi' v-show = '!isCollapse'></i>
    </div>
    <!-- 左边的时间 -->
    <div class = 'header_leftTime'>
      <!-- 默认皮肤时展示 -->
      <V-Clock v-if = "$store.state.currentTheme.indexOf('theme_default') !== -1"></V-Clock>
    </div>
    <!-- 右侧的用户信息等 -->
    <V-Header-Info></V-Header-Info>
  </div>
</template>

<script>
// 头部的时间组件
import VClock from './TheHeader_clock.vue'
import VHeaderInfo from './TheHeaderInfo.vue'
export default {
  components: {
    VClock, VHeaderInfo
  },
  computed: {
    isCollapse: function () {
      return this.$store.state.isCollapse
    }
  },
  methods: {
    // 改变左边菜单的收起和展开的状态
    changeCollapse () {
      this.$store.dispatch('changSubmenuCollapse', !this.$store.state.isCollapse)
    }
  }
}
</script>
